<template>
	<el-card class="box-card">
		<template #header>
			<div class="flex align-center justify-between">
				<span>属性面板</span>
				<el-button type="primary" @click="onSubmit">保存</el-button>
			</div>
		</template>
		<div v-for="item in templates.list" :key="item.id">
			<div v-if="item.id === templates.checkedId">
				<NavBarProps
					v-if="item.componentName === 'HyNavBar'"
					:defaultProps="item.defaultProps"
				></NavBarProps>
				<SearchProps
					v-else-if="item.componentName === 'HySearch'"
					:defaultProps="item.defaultProps"
				></SearchProps>
			</div>
		</div>
	</el-card>
</template>

<script lang="javascript">
	import { useFactoryStore } from '@/hooks/useFactoryStore';
	import { GET_SHOP_DECORATION } from '@/utils/Const';
	import { ref } from 'vue';
	import NavBarProps from './NavBarProps';
	import SearchProps from './SearchProps';
	export default {
		components : {
			SearchProps,
			NavBarProps
		},
		setup () {
			let { getter } = useFactoryStore({
				namespaced : 'shopDecoration',
				gettersMethod : [GET_SHOP_DECORATION]
			});
			let templates = ref(getter[GET_SHOP_DECORATION].value.mobile);
			let onSubmit = () => {
				console.log('onSubmit');
			};
			return {
				onSubmit,
				templates
			};
		}
	};
</script>
